<template>
  <div class="profile-container">
    <a-card title="个人信息">
      <a-descriptions :column="1">
        <a-descriptions-item label="头像">
          <a-avatar :size="64" :src="userStore.userInfo?.avatarUrl">
            {{ userStore.userInfo?.userName?.charAt(0)?.toUpperCase() }}
          </a-avatar>
        </a-descriptions-item>
        <a-descriptions-item label="用户名">
          {{ userStore.userInfo?.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          {{ userStore.userInfo?.phone || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="邮箱">
          {{ userStore.userInfo?.email || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="角色">
          <a-tag :color="USER_ROLE_COLOR[userStore.userInfo?.userRole || '']">
            {{ USER_ROLE_TEXT[userStore.userInfo?.userRole || ''] }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDateTime(userStore.userInfo?.createTime) }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider />

      <a-button type="primary" @click="handleEdit">编辑信息</a-button>
    </a-card>

    <!-- 编辑信息弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      title="编辑个人信息"
      @ok="handleModalOk"
    >
      <a-form
        :model="userForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="头像" name="userAvatar">
          <upload-image
            v-model:value="userForm.userAvatar"
            :biz="BIZ_TYPE.USER_AVATAR"
          />
        </a-form-item>
        <a-form-item label="用户名" name="userName">
          <a-input v-model:value="userForm.userName" />
        </a-form-item>
        <a-form-item label="手机号" name="phone">
          <a-input v-model:value="userForm.phone" />
        </a-form-item>
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="userForm.email" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import { updateUserUsingPost } from '@/api/userController'
import UploadImage from '@/components/UploadImage.vue'
import { BIZ_TYPE } from '@/constants/upload'
import { USER_ROLE_TEXT, USER_ROLE_COLOR } from '@/constants/user'
import { formatDateTime } from '@/utils/format'

const userStore = useUserStore()

// 编辑表单
const modalVisible = ref(false)
const userForm = ref({
  id: undefined,
  userName: '',
  email: '',
  phone: '',
  userAvatar: ''
})

// 表单规则
const rules = {
  userName: [{ required: true, message: '请输入用户名' }],
  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }]
}

// 编辑信息
const handleEdit = () => {
  userForm.value = {
    id: userStore.userInfo?.id,
    userName: userStore.userInfo?.userName || '',
    email: userStore.userInfo?.email || '',
    phone: userStore.userInfo?.phone || '',
    userAvatar: userStore.userInfo?.avatarUrl || ''
  }
  modalVisible.value = true
}

// 保存信息
const handleModalOk = async () => {
  try {
    const res = await updateUserUsingPost(userForm.value)
    message.success('更新成功')
    modalVisible.value = false
    userStore.fetchUserInfo()
  } catch (error) {
    // 错误处理由拦截器统一处理
  }
}
</script>

<style scoped>
.profile-container {
  padding: 24px;
}
</style> 